<link rel="stylesheet" href="css/character.css" />

<h2>{{character.className}}</h2>
<div class="character-page-holder">
	<div class="character-page">
		<div>
			<div id="attribute-holder" class="character-page-section">
				<h3>Attributes</h3>
				<ul id="attribute-list" class="value-list">
					<li ng-repeat="obj in attributeArray">
						<span title="{{obj.description}}">{{obj.name}}</span>
						<span title="The character's {{obj.name}}">{{obj.value}}</span>
						<span title="The character's {{obj.name}} modifier">{{obj.bonus}}</span>
					</li>
				</ul>
			</div>
			<div id="save-bonus-holder" class="character-page-section">
				<h3>Save bonus</h3>
				<ul id="save-bonus-list" class="value-list">
					<li ng-repeat="obj in saveBonusArray">
						<span title="{{obj.description}}">{{obj.name}}</span>
						<span title="The character's {{obj.name}} save bonus">{{obj.value}}</span>
					</li>
				</ul>
			</div>
			<character-page-animation animation="character.animation"></character-page-animation>
		</div>
		<div>
			<div id="skill-holder" class="character-page-section">
				<h3>Skills</h3>
				<ol id="skill-list" class="value-list">
					<li ng-repeat="obj in skillArray">
						<span>{{obj.name}}</span>
						<span title="The character's {{obj.name}} skill">{{obj.value}}</span>
					</li>
				</ol>
			</div>
		</div>
		<div>
			<div id="feat-holder" class="character-page-section">
				<h3>Feats</h3>
				<ol id="feat-category-list">
					<li ng-repeat="featCategory in featCategoryArray | orderBy: 'order'">
						<h4>{{featCategory.name}}</h4>
						<ol class="value-list feats">
							<li ng-repeat="feat in featCategory.feats" id="{{feat.id}}" title="{{feat.display.description}}">
								<span class="feat-icon-holder"><img ng-src="images/icons/{{feat.display.icon}}" /></span>
								<span class="feat-name-holder">{{feat.display.name}}</span>
							</li>
						</ol>
					</li>
				</ol>
			</div>
		</div>
		<div>
			<div id="inventory-holder" class="character-page-section">
				<h3>Inventory</h3>
				<character-inventory inventory="character.inventory"></character-inventory>
			</div>
		</div>
	</div>
</div>
<button ng-click="back()" class="transparent-icon-button left" title="Back">
	<img src="images/misc/previous.png" />
</button>
<button ng-click="forward()" class="transparent-icon-button right" title="Next">
	<img src="images/misc/next.png" />
</button>
